
export function RotateText() {

    const text = [
        '',
        'r',
        'o',
        't',
        'a',
        't',
        'e',
        'd',
        't',
        'e',
        'x',
        't',
    ]
    const LEN = text.length;

    return (
        <main className={'bg-black h-screen flex items-center'}>
            <ul className={'size-72 relative animate-spin animate-duration-3 hover:animate-none'}>
                {
                    text.map((letter,index) => {
                        return (
                            <li key={ index }
                                className={'absolute inset-0 size-fit m-auto'}
                                style={{
                                    transform: `rotate(${360 / LEN * index }deg) translateY(-110px)`
                                }}>
                                <span className={'font-mono text-2xl text-white'}>{ letter }</span>
                            </li>
                        )
                    })
                }
            </ul>
        </main>
    )
}
